<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>3D效果</title>
<style type="text/css">
* {
	padding:0;
	margin:0;
}
.container {
	width:600px;
	height:600px;
	margin:50px auto;
	border:1px #295d1b solid;
	/**设置3D**/
	-webkit-perspective: 1200px;
	perspective: 1200px;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
}

.phone {
	display:block;
	width: 300px;
	height: 437px;
	margin: 50px auto 0 auto;
	background: url(img/phone.jpg) 0px 0px / 300px 437px no-repeat;
	box-shadow: -7px 10px 10px #333;
	transform: rotateX(60deg) rotateY(3deg) rotateZ(-25deg);
	transform-origin:50% 50% 100px;
	-ms-transform-origin:50% 50% 100px;
	-webkit-transform-origin:50% 50% 100px;
	-moz-transform-origin:50% 50% 100px;
	transition: all 1s ease-out;
}
.phone:hover {
	box-shadow:-100px 100px 10px #fff;
	transform: rotate3D(0, 0, 0, 0deg);
}
</style>
</head>
<body>
<div class="container"> <a class="phone" href="javascript:"></a> </div>
</body>
</html>
